<script setup lang="ts">
import type { IP } from '@/apis/model/ip.ts'
import { getBandwidthTypeListApi } from '@/apis/modules/bandwidthType.ts'
import { deleteIpApi, getIpApi } from '@/apis/modules/ip.ts'
import { useRegions } from '@/composables/useRegions.ts'
import { ipStatusOptions } from '@/enums/ip.ts'
import { commonTableProps } from '@/utils/table.ts'
import { Message } from '@arco-design/web-vue'
import EditDialog from './components/EditDialog.vue'
import useConfig from './useConfig.ts'

const queryParams = ref({
  region_id: '',
  bandwidth_type: '',
  status: '',
  ip: '',
})

const { parse } = useLangField()
const { allRegionOptions } = useRegions()
const { tableColumns } = useConfig({ regions: allRegionOptions })
const {
  visible: dialogVisible,
  data: editDialogData,
  open: openEditDialog,
} = usePopup<IP>()

const {
  data: tableData,
  pagination,
  loading,
  run,
} = useListRequest(getIpApi, {
  params: queryParams,
  immediate: true,
})
const { createSortChange } = useTable(run, tableData)
const onSortChange = createSortChange(queryParams)

const bandwidthOptions = ref<LabelValue[]>([])
async function getBandwidthData() {
  queryParams.value.bandwidth_type = ''
  bandwidthOptions.value = []
  const res = await getBandwidthTypeListApi({
    region_id: queryParams.value.region_id,
  })
  bandwidthOptions.value = (res.list || []).map((item) => {
    const name = parse(item.name || '')
    return { label: name?.['zh-CN'] || '-', value: item.id! }
  })
}
watch(() => queryParams.value.region_id, getBandwidthData)

// 删除分组
const handleDelete = useConfirm(
  {
    title: '删除 IP',
    content: '确定要删除 IP 吗？IP 删除后不可恢复。',
    okText: '删除',
    width: 480,
    closable: false,
  },
  async (ip: IP) => {
    await deleteIpApi({ id: ip.id })
    await run()
    Message.success('删除成功')
  },
)
</script>

<template>
  <main-container
    v-model:pagination="pagination"
    :loading="loading"
    @run="run"
  >
    <template #header>
      <a-button
        type="primary"
        @click="openEditDialog()"
      >
        新建IP
      </a-button>
      <a-select
        v-model="queryParams.region_id"
        class="w-136px!"
        placeholder="全部区域"
        :options="[{ label: '全部区域', value: '' }, ...allRegionOptions]"
        @change="run()"
      />
      <a-select
        v-model="queryParams.bandwidth_type"
        class="w-136px!"
        :options="[{ label: '全部带宽类型', value: '' }, ...bandwidthOptions]"
        :disabled="!queryParams.region_id"
        @change="run()"
      />
      <a-select
        v-model="queryParams.status"
        class="w-136px!"
        placeholder="全部分配状态"
        :options="[{ label: '全部分配状态', value: '' }, ...ipStatusOptions]"
        @change="run()"
      />
      <a-input-search
        v-model="queryParams.ip"
        class="w-58!"
        placeholder="请输入IP地址搜索"
        allow-clear
        @clear="run()"
        @keydown.enter="run()"
      />
    </template>

    <a-table
      v-bind="commonTableProps"
      :columns="tableColumns"
      :data="tableData"
      @sorter-change="onSortChange"
    >
      <template #actions="{ record }">
        <a-link @click="openEditDialog(record)">
          <i-icons-edit size="14px" />
        </a-link>
        <a-link
          status="danger"
          @click="handleDelete(record)"
        >
          <i-icons-delete size="14px" />
        </a-link>
      </template>
    </a-table>
  </main-container>

  <edit-dialog
    v-model="dialogVisible"
    :record="editDialogData"
    @success="run"
  />
</template>
